{% extends 'base.html' %}
{% load staticfiles %}
{% load comment_tags %}
{% load bootstrap3 %}
{% load resume_tags %}
{% block left %}
    {% block style %}
        <style>
        .btn-lx a{
            display: block;
            text-decoration: none;
            color: white;
        }
        </style>
    {% endblock %}
    <div class="box">
        <div class="profile_photo_box">
            <a href="{% url 'users:user' resume.author_id %}"> <img src="{{ resume.author.avatar.url }}" class="touxiang"></a>

        </div>
        <div class="profile_photo">
            <span>{{ resume.title }}</span>
            <span><i class="fa fa-bolt " aria-hidden="true"></i></span>
            <span>{{ resume.category }}</span>
            <span><i class="fa fa-female" aria-hidden="true" style="color:pink;"></i></span>
        </div>

        <div class="communication">
            <span>通讯:</span>
            <span data-toggle="tooltip" data-placement="top" title="{{ request.user.email }}">
                <i class="fa fa-envelope fa-lg" aria-hidden="true" ></i></span>
            <span data-toggle="tooltip" data-placement="top" title="{{ request.user.mobile }}">
                <i class="fa fa-mobile fa-lg" aria-hidden="true" ></i></span>
            <span><i class="fa fa-wechat fa-lg" aria-hidden="true"></i></span>
            <span><i class="fa fa-qq fa-lg" aria-hidden="true"></i></span>
        </div>
        <div class="Community">
            <span>社区:</span>
            <span><i class="fa fa-github fa-lg" aria-hidden="true"></i></span>
            <span><i class="fa fa-weibo fa-lg" aria-hidden="true"></i></span>
            <span><i class="fa fa-quora fa-lg" aria-hidden="true"></i></span>
        </div>
        <div style="padding-left: 30px;padding-bottom: 20px;">
            <p style="color: #CCC">你可以从以上方式联系他</p>
                <button class="btn-lx"><a href="Mailto:{{ request.user.email }}">联系他</a></button>
        </div>
    </div>
{% endblock left %}

{% block main %}

    <div class="box title">
        <div style="padding: 10px;margin-top: 10px;">
            <span>技能树：</span>
            {% for tag in resume.skill.all %}
                <span class="label label-warning">{{ tag.name }}</span>
            {% endfor %}


        </div>
        <div style="padding: 10px;margin-top: -10px;">
            <span>印象海：</span>
            {% get_lab_list resume.id as lab_list %}
            {% for foo in lab_list %}
                <span class="label  label-primary">{{ foo.content }}</span>
            {% endfor %}

            {% if request.user.identify == 'teacher' %}
                <a id="addlab" class="label  label-warning">添加标签</a>
            {% endif %}

        </div>
        <div style="padding: 10px;margin-top: -10px;">
            <span>点赞：</span>
            <span class="label  label-warning" id="count">{{ resume.total_like }}</span>
            <span class="jns ">
                <a id="like" data-id="{{ resume.id }}" onclick="newLike()">
                    <i id="thumb" class="" aria-hidden="true"></i>
                </a>
             </span>
        </div>
    </div>
    <!--作品-->
    <div class="panel panel-info">
        <div class="panel-heading">
            <i class="fa fa-list-alt" aria-hidden="true"></i>
            <span>作品</span>
        </div>
        <div class="panel-body">

            {% get_work_list resume.id as works %}
            {% if works.count > 0 %}
                {% for foo in works %}
                    <p style="width:100%;padding-left: 10px;color: #0099ff;font-weight: bold;font-size: 18px;">
                        {{ foo.name }}<span
                            style="float: right;color: #000;font-weight: normal;margin-right: 20px;color: #7886ab;font-size: 10px;">
                <span class="label label-badge">{{ foo.position }}</span></span>
                    </p>
                    <p style="padding-left: 10px;font-weight: normal;">
                        {{ foo.content }}
                    </p>

                {% endfor %}
            {% endif %}
        </div>
    </div>
    <!--履历-->
    <div class="panel panel-info">
        <div class="panel-heading">
            <i class="fa fa-pencil-square" aria-hidden="true"></i>
            履历简介
        </div>
        <div class="panel-body">
            <p style="padding-left: 10px;font-weight: normal;word-wrap:break-word;">
                {{ resume.body|safe}}
            </p>
        </div>
    </div>
    <!--获奖-经历-->
    <div class="panel panel-info">
        <div class="panel-heading">
            <i class="fa fa-certificate" aria-hidden="true"></i>
            获奖/经历
        </div>
        <div class="panel-body">
            {% get_prize_list resume.id as prizes %}
            {% if prizes.count > 0 %}
                {% for foo in prizes %}
                    <p class="lvp">{{ foo.content }}</p>
                {% endfor %}
            {% else %}
                <p class="lvp">无</p>
            {% endif %}


        </div>
    </div>



    <div class="comments">
        <header>
            <div class="pull-right"><a href="#commentReplyForm2" class="btn btn-primary" id="comment-bt">
                <i class="icon-comment-alt"></i> 发表评论</a></div>
            <h3>所有评论</h3>
        </header>
        {% get_comment_list resume as comments %}
        {% get_comment_form as form %}
        {% get_reply_form as reply_form %}
        {% if comments.count > 0 %}
            {% for foo in comments %}
                <div class="comment">
                    <a href="{% url 'users:user' foo.author.id %}" class="avatar">
                        <img src="{{ foo.author.avatar.url }}" alt="">
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">{{ foo.get_timeago }} </div>
                        <div>
                            <a href="{% url 'users:user' foo.author.id %}"><strong>{{ foo.author.nickname }}</strong></a>
                        </div>
                        <div class="text">{{ foo.content }}</div>
                        <div class="actions">
                            <a>回复</a>
                        </div>
                        <form style="display: none" class="form" method="post">
                            {% csrf_token %}
                            {% bootstrap_form form %}
                            <div class="form-group comment-user">
                                <div class="row">
                                    <div class="col-md-2">
                                        <button data-reply_to_id="{{ foo.author.id }}" data-comment="{{ foo.id }}"
                                                type="button" class="btn btn-block btn-primary reply_bt">
                                            <i class="icon-ok"></i>发布
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    {% get_reply_list foo as replys %}
                    {% if replys.count > 0 %}
                        <div class="comments-list">
                            {% for reply in replys %}
                                <div class="comment">
                                    <a href="{% url 'users:user' reply.reply_from.id %}" class="avatar">
                                        <img src="{{ reply.reply_from.avatar.url }}" alt="">
                                    </a>
                                    <div class="content">
                                        <div class="pull-right text-muted">{{ reply.get_timeago }}</div>
                                        <div>
                                            <a href="{% url 'users:user' reply.reply_from.id %}"><strong>{{ reply.reply_from.nickname }}</strong></a>
                                            <span class="text-muted">回复</span>
                                            <a href="{% url 'users:user' reply.reply_to.id %}">{{ reply.reply_to.nickname }}</a>
                                        </div>
                                        <div class="text">{{ reply.content }}</div>
                                        <div class="actions">
                                            <a href="##">回复</a>
                                        </div>
                                        <form style="display: none" class="form" method="post">
                                            {% csrf_token %}
                                            {% bootstrap_form form %}
                                            <div class="form-group comment-user">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <button data-reply_to_id="{{ foo.author.id }}"
                                                                data-comment="{{ reply.comment.id }}"
                                                                type="button"
                                                                class="btn btn-block btn-primary reply_bt">
                                                            <i class="icon-ok"></i>发布
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                </div>
            {% endfor %}

        {% endif %}

        <footer>
            <div class="reply-form" id="commentReplyForm2" style="display: none">
                <a href="#" class="avatar">
                    <img src="{{ reply.reply_from.avatar.url }}" alt="">
                </a>
                <form class="form" action="{{ resume.get_comment_url }}" method="post">
                    {% csrf_token %}
                    {% bootstrap_form form %}
                    <div class="form-group comment-user">
                        <div class="row">
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-block btn-primary">
                                    <i class="icon-ok"></i>发布
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </footer>
    </div>
{% endblock main %}

{% block domready %}
    <script>
    $('[data-toggle="tooltip"]').tooltip();

        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        });

        $(function () {
            is_like();
            var id = $('#like').data('id');

            function is_like() {
                var id = $('#like').data('id');
                $.ajax({
                    type: 'post',
                    url: '/resume/is_like/',
                    dataType: 'json',
                    data: {"id": id, "type": "resume"},
                    success: function (data) {
                        if (data.status == 1) {
                            $('#thumb').attr("class", "fa fa-thumbs-up fa-lg ");
                        } else {
                            $('#thumb').attr("class", "fa fa-thumbs-o-up fa-lg ");
                        }
                    }

                });
            };


            $('#comment-bt').bind("click", function () {
                $(".form").css('display', 'none');
                $('#commentReplyForm2').css('display', 'block');
                $('#commentReplyForm2').children().css('display', 'block');
            });

            $('.actions').bind("click", function () {
                var $this = $(this);
                $('#commentReplyForm2').css('display', 'none');
                $(".form").css('display', 'none');
                $this.next().css('display', 'block');

            });

            $('.reply_bt').bind("click", function () {
                var $this = $(this);
                var commnet_id = $this.data('comment');
                var reply_to_id = $this.data('reply_to_id');
                var content = $(this).parentsUntil(".form-group").parent().parent().parent().find("textarea").val();
                console.log(content);
                $.ajax({
                    type: 'post',
                    url: "{{ resume.get_reply_url }}",
                    data: {
                        "commnet_id": commnet_id,
                        "reply_to_id": reply_to_id,
                        "content": content
                    },
                    dataType: 'json',
                    success: function (data) {
                        window.location.reload();


                    },
                    error: function (data) {
                        alert("error");
                    }
                })

            });

            newLike = function () {
                var id = $('#like').data('id');
                $.ajax({
                    type: 'post',
                    url: '/resume/like/',
                    dataType: 'json',
                    data: {"id": id, "type": "resume"},
                    success: function (data) {
                        $('#count').text(data.number);

                        if (data.status == 1) {
                            $('#thumb').attr("class", "fa fa-thumbs-up fa-lg ");
                        } else {
                            $('#thumb').attr("class", "fa fa-thumbs-o-up fa-lg ");
                        }
                    }

                });
            };

            $('#addlab').bind('click', function () {

                bootbox.prompt("添加一个印象～", function (result) {
                    if (result) {
                        $.ajax({
                            type: 'post',
                            url: '/resume/add_lab/',
                            dataType: 'json',
                            data: {"resume_id": {{ resume.id }}, 'lab': result},
                            success: function (data) {
                                new $.zui.Messager('添加成功', {
                                type: 'warning',
                                icon: 'heart',
                                placement: 'top' // 定义显示位置
                            }).show();
                                window.setTimeout("window.location.reload()", 2000);

                            },
                            error: function () {
                                alert(data.status);
                            }
                        })

                    }
                });
            })

        });
    </script>
{% endblock %}
